<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div align="left">
 <div id="main">
  <div id="field"></div>
 </div>
  <div id="settings">
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
click on color blocks to change color of brush
    <div id="exitcolor"></div>

    <div id="ctrlz" class="button">click here to back last pixel</div>
      <table>
        <tr><td>click to change preset
        
          <td><div id="ch1" class="preset"></div>
          <td><div id="ch2" class="preset"></div>
          <td><div id="ch3" class="preset"></div>
          <td><div id="ch4" class="preset"></div>
          <td><div id="ch5" class="preset"></div>
        <tr><td>click to take color
        
          <td><div id="tk1" class="preset"></div>
          <td><div id="tk2" class="preset"></div>
          <td><div id="tk3" class="preset"></div>
          <td><div id="tk4" class="preset"></div>
          <td><div id="tk5" class="preset"></div>

        <tr><td><div id="rectangle" class="button">rectangle 5x5</div>
        <tr><td><div id="rectangle1" class="button">rectangle 9x9</div>
        <tr><td><div id="bck" class="button">background</div>
      </table>
  </div>
</div>

<div id="abs"></div>

<script>
//alert('Welcome to pixel painter');
var color = '#f00';
var xGet, yGet;
var brush = 0;
var id;
var red = 'f';
var green = 'f';
var hex, recl;
var cr, cg, cb;
var backcolor;
cr = 0;
cg = 0;
cb = 0;

document.getElementById('exitcolor').innerHTML = color;

// draw field
drawfield();
function drawfield() {
var field = document.getElementById('main');
var htmlfield = '';
for (var cellY=1; cellY<100; cellY++) {
  htmlfield += '<tr class="tr">'
  for (var cellX=1; cellX<100; cellX++) {
  htmlfield += '<td class="td"' + ' id="cell' + cellX + 'an' + cellY + '">';
  }
}
field.innerHTML = '<table id="table" cellspacing="0" >' + htmlfield + '</table>';
}


// get X and Y
  document.getElementById('abs').onmousedown = function (e) {
  xGet = e.clientX/5;
  while (xGet>=1) {
    xGet = xGet - 1;
  }
  xGet = (e.clientX/5) - xGet - 1; //get X
  yGet = e.clientY/5;
  while (yGet>=1) {
    yGet = yGet - 1;
  }
  yGet = (e.clientY/5) - yGet - 1; //get Y
  id = 'cell' + xGet + 'an' + yGet; // get td ID  
  backcolor = document.getElementById(id).style.background;
  document.getElementById(id).style.background = color;
}

document.getElementById('red').onmousedown = function (r) {
  r=r||event;
  red = r.clientX/4;
  while (red>=1) {
    red = red - 1;
  }
  red = (r.clientX/4) - red - 2;
  recl = red;
  hexcolor(recl);
  red = recl;
  cr = red;
  createColor (red, cg, cb);
}

document.getElementById('green').onmousedown = function (r) {
  r=r||event;
  green = r.clientX/4;
  while (green>=1) {
    green = green - 1;
  }
  green = (r.clientX/4) - green - 2;
  recl = green;
  hexcolor(recl);
  green = recl;
  cg = green;
  createColor (cr, green, cb);
}

document.getElementById('blue').onmousedown = function (r) {
  r=r||event;
  blue = r.clientX/4;
  while (blue>=1) {
    blue = blue - 1;
  }
  blue = (r.clientX/4) - blue - 2;
  recl = blue;
  hexcolor(recl);
  blue = recl;
  cb = blue;
  createColor (cr, cg, blue);
}

//presets change
document.getElementById('ch1').onclick = function () {
  document.getElementById('ch1').style.background = color;
  document.getElementById('tk1').style.background = color;
}
document.getElementById('ch2').onclick = function () {
  document.getElementById('ch2').style.background = color;
  document.getElementById('tk2').style.background = color;
}
document.getElementById('ch3').onclick = function () {
  document.getElementById('ch3').style.background = color;
  document.getElementById('tk3').style.background = color;
}
document.getElementById('ch4').onclick = function () {
  document.getElementById('ch4').style.background = color;
  document.getElementById('tk4').style.background = color;
}
document.getElementById('ch5').onclick = function () {
  document.getElementById('ch5').style.background = color;
  document.getElementById('tk5').style.background = color;
}

//take color from presets
document.getElementById('tk1').onclick = function () {
  color = document.getElementById('tk1').style.background;
  document.getElementById('exitcolor').innerHTML = color;
  document.getElementById('exitcolor').style.background = color;
}
document.getElementById('tk2').onclick = function () {
  color = document.getElementById('tk2').style.background;
  document.getElementById('exitcolor').innerHTML = color;
  document.getElementById('exitcolor').style.background = color;
}
document.getElementById('tk3').onclick = function () {
  color = document.getElementById('tk3').style.background;
  document.getElementById('exitcolor').innerHTML = color;
  document.getElementById('exitcolor').style.background = color;
}
document.getElementById('tk4').onclick = function () {
  color = document.getElementById('tk4').style.background;
  document.getElementById('exitcolor').innerHTML = color;
  document.getElementById('exitcolor').style.background = color;
}
document.getElementById('tk5').onclick = function () {
  color = document.getElementById('tk5').style.background;
  document.getElementById('exitcolor').innerHTML = color;
  document.getElementById('exitcolor').style.background = color;
}

//rectangle 5x5
document.getElementById('rectangle').onclick = function() {
  for (var xx=(-2); xx<=2; xx++) {
    for (var yy=(-2); yy<=2; yy++) {
      id = ('cell' + (xGet+xx) + 'an' + (yGet+yy));
      document.getElementById(id).style.background = color;
    }
  }
}
//rectangle 9x9
document.getElementById('rectangle1').onclick = function() {
  for (var xx=(-4); xx<=4; xx++) {
    for (var yy=(-4); yy<=4; yy++) {
      id = ('cell' + (xGet+xx) + 'an' + (yGet+yy));
      document.getElementById(id).style.background = color;
    }
  }
}
//background fill
document.getElementById('bck').onclick = function() {
  for (var cellY=1; cellY<100; cellY++) {
  for (var cellX=1; cellX<100; cellX++) {
  metaid = 'cell' + cellX + 'an' + cellY;
  document.getElementById(metaid).style.background = color;
  }
}
}


// make hex
function hexcolor (hex) {
  if(hex>9) {
    if(hex==15) hex='f';
    if(hex==14) hex='e';
    if(hex==13) hex='d';
    if(hex==12) hex='c';
    if(hex==11) hex='b';
    if(hex==10) hex='a';
  }
  return(recl=hex);
}

//create color
function createColor (cr, cg, cb) {
  color = '#'+ cr + cg + cb;
  document.getElementById('exitcolor').style.background = color;
  document.getElementById('exitcolor').innerHTML = color;
}

//backcolor
document.getElementById('ctrlz').onmousedown = function (r) {
  r=r||event;
  document.getElementById(id).style.background = backcolor;
}
</script>
</body>
</html>